<template>
	<view class="content">
		<!-- 申请详情applicationDetail -->
		<view class="ico">
			<view class="iconfont icon-wancheng"></view>
			<view class="success">医师审核中</view>
		</view>
		<view class="card">
			<view class="one">
				<text class="font">出院状态</text>
				<text>已出院</text>
			</view>
			<view class="one">
				<text class="font">领取方式</text>
				<text>邮寄</text>
			</view>
			<view class="address">
				<text class="font">收件地址</text>
				<text>{{detailInfo.address}}</text>
				<text>{{detailInfo.mailingName}} {{detailInfo.phone}}</text>
			</view>
		</view>
		<view class="card">
			<view class="one">
				<text class="font">住院人</text>
				<text>{{detailInfo.mailingName}}</text>
			</view>
			<view class="one">
				<text class="font">住院号</text>
				<text>{{detailInfo.hospitalNumber}}</text>
			</view>
			<!-- <view class="photo">
				<text>身份证人像面照片</text>
				<view class="img"></view>
			</view>
			<view class="photo">
				<text>身份证国徽面照片</text>
				<view class="img"></view>
			</view>
			<view class="photo">
				<text>手持身份证照片</text>
				<view class="img"></view>
			</view> -->
		</view>
		<view class="card">
			<view class="two"><text class="font">复印内容</text></view>
			<view class="two">
				<text class="font">入院记录*1</text>
				<text>3元</text>
			</view>
			<view class="two">
				<text class="font">出院记录*1</text>
				<text>4元</text>
			</view>
			<view class="two">
				<text class="font">医嘱*1</text>
				<text>2元</text>
			</view>
			<view class="two">
				<text></text>
				<text>合计9元</text>
			</view>
		</view>
		<view class="card">
			<view class="one">
				<text class="font">申请时间</text>
				<text>{{detailInfo.applicationDate}}</text>
			</view>
			<view class="one">
				<text class="font">支付方式</text>
				<text>微信支付</text>
			</view>
			<view class="one">
				<text class="font">配送方式</text>
				<text>顺丰到付</text>
			</view>
		</view>
		<view class="">
			<navigator
				:url="'/pages/allRecord/applicationRecord/applicationRecord'"
			>
				<button type="primary" id="button">取消申请</button>
			</navigator>

			<!-- <uni-popup ref="popup" type="bottom" background-color="#fff">底部弹出 Popup</uni-popup> -->
		</view>
		
	</view>
</template>
<script setup>
	import { reactive,onMounted, ref } from 'vue'
	import {detailApi} from '@/api/nucleicAcidApi.js'
	import { useLoginStore } from '@/store/loginStore.js'
	const loginStore = useLoginStore()
	let detailInfo=ref([])
	let id=ref()
	id.value=loginStore.id
	onMounted(async()=>{
		console.log(id.value,23)
		let res = await detailApi(id.value)
		console.log(res)
		if (res.data.code == 0) {
			console.log('成功！')
			detailInfo.value=res.data.data
		}
	})
</script>

<style lang="less">
.content {
	#button {
		margin: 80rpx 0;
		background-color: #007aff;
	}
	margin: 50rpx 30rpx;

	.ico {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.icon-wancheng {
			font-size: 98rpx;
			margin: 24rpx 0;
			color: #006eff;
		}

		.success {
			font-size: 38rpx;
		}
	}

	.card {
		border: 1px solid #f2f2f2;
		margin: 30rpx 0;

		.one {
			height: 100rpx;
			display: flex;
			align-items: center;
			margin: 0 30rpx;
			font-size: 28rpx;
			border-top: 1px solid #f2f2f2;

			.font {
				color: #afafaf;
				margin-right: 20rpx;
			}
		}

		.two {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 30rpx;
			font-size: 28rpx;
			border-top: 1px solid #f2f2f2;
		}

		.address {
			font-size: 28rpx;

			.font {
				color: #afafaf;
			}

			border-top: 1px solid #f2f2f2;
			margin: 0 30rpx;
			height: 180rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
		}

		.photo {
			font-size: 28rpx;
			color: #afafaf;
			margin: 30rpx 30rpx;
			view {
				width: 100%;
				background-color: #f3f8ff;
				height: 300rpx;
				border: 1px solid #f2f2f2;
				border-radius: 10rpx;
				margin-top: 30rpx;
			}
		}
	}
}
</style>
